<!--
  - Copyright (c) 2018.
  - 北京九思金信科技有限公司对该文件内容保留所有权利。
  - 未经许可，不得私自拷贝、传播、发布、引用该文件内容，违者将被追究法律责任。
  -->

<template>
  <div class="CmAddList_box">
    <div class="CmAddList_header">
      <div class="CmAddList_header_return" @click="returnHistiy">
        <img src="@/pages/mobile/assets/img/Back@3x.png" alt />
        <span>返回</span>
      </div>
      <p>新建{{ clientType }}客户</p>
    </div>
    <div class="dictograph_box">{{ g_r }}{{ q_y }}</div>
    <div class="scroll">
      <scroll class="CmAddList_content">
        <div class="CmAddList_title">请填写{{ clientType }}客户信息</div>
        <!-- 个人客户 -->
        <div class="CmAddList_list_box" v-if="clientType == '个人'">
          <group class="CmAddList_list" label-align="right">
            <div class="CmAddList_list_item">
              <span>客户名称</span>
              <input
                v-model="CmAddListDataOne.customerName"
                type="text"
                placeholder="客户姓名"
              />
            </div>
            <div class="CmAddList_list_item">
              <span>主办经理</span>
              <input
                v-model="CmAddListDataOne.mainManagerId"
                type="text"
                placeholder="经理姓名"
              />
            </div>
            <div class="CmAddList_list_item">
              <span>协办经理</span>
              <input
                v-model="CmAddListDataOne.viceManagerId"
                type="text"
                placeholder="经理姓名"
              />
            </div>
            <popup-picker
              class="CmAddList_list_item_typeId"
              title="证件类型"
              placeholder="请选择"
              :data="listTypeOneId"
              show-name
              v-model="CmAddListDataOne.identityType"
              value-text-align="left"
            ></popup-picker>
            <div class="CmAddList_list_item">
              <span>证件号码</span>
              <input
                v-model="CmAddListDataOne.identityNo"
                type="text"
                placeholder="客户身份证号"
              />
              <div
                class="CmAddList_list_item_camera vux-header-more"
                @click="cameraInfo"
              >
                <img src="@/pages/mobile/assets/appimg/customerManagement/camera.jpg" alt />
              </div>
            </div>
            <!-- 扫描信息 -->
            <div class="CmAddList_list_item">
              <span>户籍地址</span>
              <input
                type="text"
                v-model="CmAddListDataOne.censusRegisterAddress"
              />
            </div>
            <div class="CmAddList_list_item">
              <span>出身年月</span>
              <input type="text" v-model="CmAddListDataOne.birthday" />
            </div>
            <div class="CmAddList_list_item">
              <span>民族</span>
              <input type="text" v-model="CmAddListDataOne.nation" />
            </div>
            <div class="CmAddList_list_item">
              <span>性别</span>
              <input type="text" v-model="CmAddListDataOne.sex" />
            </div>
          </group>
            <p>请填写上述所有内容再保存。</p>

          <div class="CmAddList_button">
            <button
              v-if="clientType == '个人'"
              :class="{ buttonMeet: CmAddListDataGROk }"
              @click="submitOne"
            >
              提交
            </button>
          </div>
        </div>
        <div class="CmAddList_list_box" v-else-if="clientType == '企业'">
          <!-- 企业客户 -->
          <group class="CmAddList_list" label-align="right">
            <div class="CmAddList_list_item">
              <span>企业名称</span>
              <input
                v-model="CmAddListDataEnterprise.customerName"
                type="text"
                placeholder="企业名称"
              />
            </div>
            <div class="CmAddList_list_item">
              <span>主办经理</span>
              <input
                v-model="CmAddListDataEnterprise.mainManagerId"
                type="text"
                placeholder="经理姓名"
              />
            </div>
            <div class="CmAddList_list_item">
              <span>协办经理</span>
              <input
                v-model="CmAddListDataEnterprise.viceManagerId"
                type="text"
                placeholder="经理姓名"
              />
            </div>
            <popup-picker
              class="CmAddList_list_item_typeId"
              title="企业规模"
              placeholder="请选择"
              :data="listTypeScale"
              show-name
              v-model="CmAddListDataEnterprise.enterpriseScale"
              value-text-align="left"
            ></popup-picker>
            <popup-picker
              class="CmAddList_list_item_typeId"
              title="证件类型"
              placeholder="请选择"
              :data="listTypeId"
              show-name
              v-model="CmAddListDataEnterprise.identityType"
              value-text-align="left"
            ></popup-picker>
            <div class="CmAddList_list_item">
              <span>证件号码</span>
              <input
                v-model="CmAddListDataEnterprise.identityNo"
                type="text"
                placeholder="社会统一信用码"
              />
              <div
                class="CmAddList_list_item_camera vux-header-more"
                @click="cameraInfo"
              >
                <img src="@/pages/mobile/assets/appimg/customerManagement/camera.jpg" alt />
              </div>
            </div>
            <!-- 扫描信息营业执照 -->
            <div class="CmAddList_list_item">
              <span>名称</span>
              <input type="text" v-model="CmAddListDataEnterprise.name" />
            </div>
            <div class="CmAddList_list_item">
              <span>经营场所</span>
              <input
                type="text"
                v-model="CmAddListDataEnterprise.actualAddress"
              />
            </div>
            <div class="CmAddList_list_item">
              <span>注册资本</span>
              <input
                type="text"
                v-model="CmAddListDataEnterprise.registeredCurrencyId"
              />
            </div>
            <div class="CmAddList_list_item">
              <span>注册日期</span>
              <input
                type="text"
                v-model="CmAddListDataEnterprise.establishmentDate"
              />
            </div>
            <div class="CmAddList_list_item">
              <span>经营者</span>
              <input type="text" v-model="CmAddListDataEnterprise.creatorId" />
            </div>
            <div class="CmAddList_list_item">
              <span>有效期</span>
              <input
                type="text"
                v-model="CmAddListDataEnterprise.operatingPeriodEnd"
              />
            </div>
            <div class="CmAddList_list_item_textarea">
              <span>经营范围</span>
              <textarea
                name
                id
                rows="3"
                v-model="CmAddListDataEnterprise.businessScope"
              ></textarea>
            </div>
          </group>
          <div class="CmAddList_button">
            <button
              :class="{ buttonMeet: CmAddListDataQYOk }"
              @click="submitEnterprise"
            >
              提交
            </button>
          </div>
        </div>
        <div class="CmAddList_list_box" v-else>
          <!-- 智能添加 -->
          <group class="CmAddList_list" label-align="right"></group>
          <div class="CmAddList_button">
            <!-- <button @click="submitCapacity">提交</button> -->
          </div>
        </div>
      </scroll>
    </div>
    <!-- 相机弹框 -->
    <div
      class="CmAddList_alert"
      @click.stop="cameraInfoNo"
      :class="{ CmAddList_alert_active: camera }"
    >
      <div class="CmAddList_alert_box">
        <div class="CmAddList_alert_box_menu" @click.stop>
          <div class="CmAddList_alert_box_menu_item" @click="openCamera()">
            拍摄
          </div>
          <div class="CmAddList_alert_box_menu_item" @click="openAlbum()">
            从相册选择上传
          </div>
        </div>
        <div class="CmAddList_alert_box_action">
          <div
            class="CmAddList_alert_box_action_cell"
            @click.stop="cameraInfoNo"
          >
            取消
          </div>
        </div>
      </div>
    </div>
    <toast
      v-model="imgPositionValue"
      type="text"
      :time="showPositionValuetime"
      is-show-mask
      :text="showPositionValuetext"
      :position="position"
    ></toast>
  </div>
</template>

<script>
import {
  GroupTitle,
  Group,
  Cell,
  XInput,
  Selector,
  PopupPicker,
  Datetime,
  XNumber,
  ChinaAddressData,
  XAddress,
  XTextarea,
  XSwitch,
  Toast,
  XButton,
  Loading
} from "vux";
import "./CmAddList.less";
import Scroll from "@/pages/mobile/components/JoysScroll/JoysScroll";
export default {
  name: "",
  components: {
    Group,
    GroupTitle,
    Cell,
    XInput,
    Selector,
    PopupPicker,
    XAddress,
    Datetime,
    XNumber,
    XTextarea,
    XSwitch,
    Scroll,
    Toast,
    XButton,
    Loading
  },
  data () {
    return {
      camera: false, // 相机弹框
      listTypeItem: [],
      listTypeOneId: [[]], //个人证件类型
      listTypeId: [[]], //企业证件类型
      listTypeScale: [[]], // 企业类型型选择
      clientType: "", //选择新建类型   {个人 企业}
      upImageInfo: "", //上传的图片信息
      typeIdCard: "", //      证件类型
      // 个人表单数据
      CmAddListDataOne: {
        customerName: "",
        mainManagerId: "",
        viceManagerId: "",
        identityType: [],
        identityNo: "",
        // 身份证
        censusRegisterAddress: "",
        birthday: "",
        nation: "",
        sex: ""
      },
      // 企业表单数据
      CmAddListDataEnterprise: {
        customerName: "",
        mainManagerId: "",
        viceManagerId: "",
        enterpriseScale: [],
        identityType: [],
        identityNo: "",
        // 营业执照
        actualAddress: "",
        registeredCurrencyId: "",
        establishmentDate: "",
        creatorId: "",
        operatingPeriodEnd: "",
        businessScope: ""
      },
      identityCodeState: false, //身份证号填写是否合法
      businessCodeState: false, //企业社会统一码是否合法
      CmAddListDataGR: "", // 监听个人客户表单是否为空
      CmAddListDataQY: "", // 监听企业客户表单是否为空
      CmAddListDataGROk: false, //个人按钮添加颜色并可点击
      CmAddListDataQYOk: false, //企业按钮添加颜色并可点击
      imgPositionValue: false, // 图片识别失败信息提示信息提示
      position: "default", //弹框
      showPositionValuetext: "", // 弹框提示信息
      showPositionValuetime: 3000 //弹框显示时间
    };
  },

  methods: {
    // 新建客户类型判断
    loadInfo (val) {
      if (val == 1) {
        this.clientType = "";
        this.typeIdCard = "idCard";
      } else if (val == 2) {
        console.log(val, 'hhhh')
        this.typeIdCard = "businessLicense";
        this.clientType = "企业";
        this.QueryEnumGM("joys-master-data", "enterpriseScale", this.listTypeScale); //企业类型
      } else {
        this.clientType = "个人";
        this.typeIdCard = "idCard";
      }
    },
    // 查询枚举
    QueryEnum (serviceName, typeName, dataArray) {
      this.$axios({
        method: "get",
        url: "/joys-rest/" + serviceName + "/enums/" + typeName + "/items",
        headers: {
          "AUTH-TOKEN": localStorage.getItem("AUTH-TOKEN"),
          "Content-Type": "application/json;charset=UTF-8"
        }
      })
        .then(res => {
          console.log(res, "枚举获取失败");
          for (const key in res.data) {
            dataArray[0].push({
              name: res.data[key].label,
              value: res.data[key].value
            });
          }
        })
        .catch(error => {
          console.log(error, "枚举获取失败");
        });
    },
    // 企业规模查询
    QueryEnumGM (serviceName, typeName, dataArray) {
      // /items/enterpriseScale/root
      this.$axios({
        method: "get",
        url: "/joys-rest/" + serviceName + "/items/" + typeName + "/root",
        headers: {
          "AUTH-TOKEN": localStorage.getItem("AUTH-TOKEN"),
          "Content-Type": "application/json;charset=UTF-8"
        }
      })
        .then(res => {
          console.log(res, "枚举获取失败");
          for (const key in res.data) {
            dataArray[0].push({
              name: res.data[key].itemName,
              value: res.data[key].itemCode
            });
          }
        })
        .catch(error => {
          console.log(error, "枚举获取失败");
        });
    },
    // 打开相册
    openAlbum () {
      navigator.camera.getPicture(this.albumSuccess, this.albumError, {
        quality: 50,
        sourceType: 0,
        targetWidth: 1000,
        targetHeight: 1000,
        destinationType: Camera.DestinationType.DATA_URL,
        sourceType: Camera.PictureSourceType.PHOTOLIBRARY
      });
      this.camera = false;
    },
    // 打开相机
    openCamera () {
      navigator.camera.getPicture(this.albumSuccess, this.albumError, {
        quality: 50,
        sourceType: 1,
        targetWidth: 1000,
        targetHeight: 1000,
        destinationType: Camera.DestinationType.DATA_URL,
        sourceType: Camera.PictureSourceType.CAMERA
      });
      this.camera = false;
    },
    //调取成功触发事件图片上传服务器做对比
    albumSuccess (imageURL) {
      // alert(imageURL, "图片数据");
      if (this.clientType == "个人") {
        this.imgUploading();
        this.$axios({
          method: "post",
          url: `/joys-rest/joys-recognition/recog/idCard`,
          headers: {
            "AUTH-TOKEN": localStorage.getItem("AUTH-TOKEN"),
            "Content-Type": "application/json;charset=utf-8"
          },
          data: imageURL
        })
          .then(res => {
            this.CmAddListDataOne.identityType = ["身份证"];
            this.CmAddListDataOne.identityNo = res.data.cardId; //证件号码
            this.CmAddListDataOne.censusRegisterAddress = res.data.address; //地址
            this.CmAddListDataOne.birthday = res.data.birth; //出生年月
            this.CmAddListDataOne.nation = res.data.nationality; //民族
            this.CmAddListDataOne.sex = res.data.sex; //性别
            this.$vux.loading.hide();
            this.showPositionValuetext = "识别完成,请校验信息";
            this.imgPosition("top");
          })
          .catch(error => {
            this.showPositionValuetext = "上传失败";
            this.imgPosition("middle");
            // alert(error, "上传失败");
            console.log(error);
          });
      } else if (this.clientType == "企业") {
        this.imgUploading();
        this.$axios({
          method: "post",
          url: `/joys-rest/joys-recognition/recog/businessLicense`,
          headers: {
            "AUTH-TOKEN": localStorage.getItem("AUTH-TOKEN"),
            "Content-Type": "application/json;charset=utf-8"
          },
          data: imageURL
        })
          .then(res => {
            this.CmAddListDataEnterprise.name = res.data.name; //名称
            this.CmAddListDataEnterprise.identityType = ["社会统一信用码"]; //证件类型
            this.CmAddListDataEnterprise.identityNo = res.data.regNum; //证件号码//注册号
            this.CmAddListDataEnterprise.actualAddress = res.data.address; //经营场所
            this.CmAddListDataEnterprise.registeredCurrencyId =
              res.data.captial; //注册资本
            this.CmAddListDataEnterprise.establishmentDate =
              res.data.establishDate; //注册日期
            this.CmAddListDataEnterprise.creatorId = res.data.person; //经营者
            this.CmAddListDataEnterprise.operatingPeriodEnd =
              res.data.validPeriod; //有效期
            this.CmAddListDataEnterprise.businessScope = res.data.business; //经营范围
            this.$vux.loading.hide();
            this.showPositionValuetext = "识别完成,请校验信息";
            this.imgPosition("top");
          })
          .catch(error => {
            this.showPositionValuetext = "识别失败";
            this.imgPosition("middle");
            // alert(error, "上传失败");
            console.log(error);
          });
      } else {
      }
    },
    //调取失败触发事件
    albumError (message) {
      // this.showPositionValuetext = "未识别";
      // this.imgPosition("middle");
    },

    // 点击保存个人
    submitOne () {
      if (this.CmAddListDataGROk) {
        this.$axios({
          method: "put",
          url: "/joys-rest/lss-customer/custInfo/person",
          headers: {
            "AUTH-TOKEN": localStorage.getItem("AUTH-TOKEN")
            // "Content-Type": "application/json;charset=utf-8"
          },
          timeout: 5000,
          data: {
            customerName: this.CmAddListDataOne.customerName, //名字
            mainManagerId: this.CmAddListDataOne.mainManagerId, //主办经理
            viceManagerId: this.CmAddListDataOne.viceManagerId, //协办经理
            identityType: this.CmAddListDataOne.identityType[0], //证件类型
            identityNo: this.CmAddListDataOne.identityNo, //证件号
            censusRegisterAddress: this.CmAddListDataOne.censusRegisterAddress, //地址
            birthday: this.CmAddListDataOne.birthday, //年龄
            nation: this.CmAddListDataOne.nation, //民族
            sex: this.CmAddListDataOne.sex, //性别
            customerType: "PERSONAL"
          }
        })
          .then(res => {
            this.showPositionValuetext = "提交成功";
            this.imgPosition("middle");
            setTimeout(() => {
              this.$router.push({
                path: "/customerManagement"
              });
            }, 500);
            console.log(res, "上传成功个人");
          })
          .catch(error => {
            this.showPositionValuetext = "提交失败";
            this.imgPosition("middle");
            console.log(error, "上传失败个人");
          });
      }
    },
    // 点击保存智能保存
    submitCapacity () { },
    // 点击保存企业
    submitEnterprise () {
      // debugger;
      if (this.CmAddListDataQYOk) {
        this.$axios({
          method: "put",
          url: "/joys-rest/lss-customer/custInfo/corp",
          headers: {
            "AUTH-TOKEN": localStorage.getItem("AUTH-TOKEN"),
            "Content-Type": "application/json;charset=utf-8"
          },
          timeout: 5000,
          data: {
            // 营业执照字段
            customerName: this.CmAddListDataEnterprise.customerName, //企业名字
            enterpriseScale: this.CmAddListDataEnterprise.enterpriseScale[0], //企业规模
            mainManagerId: this.CmAddListDataEnterprise.mainManagerId, //主办经理
            viceManagerId: this.CmAddListDataEnterprise.viceManagerId, //协办经理
            identityType: this.CmAddListDataEnterprise.identityType[0], //证件类型
            identityNo: this.CmAddListDataEnterprise.identityNo, //证件号
            actualAddress: this.CmAddListDataEnterprise.actualAddress, //经营场所
            registeredCurrencyId: this.CmAddListDataEnterprise
              .registeredCurrencyId, //注册资本
            establishmentDate: this.CmAddListDataEnterprise.establishmentDate, //注册日期
            creatorId: this.CmAddListDataEnterprise.creatorId, //经营者
            operatingPeriodEnd: this.CmAddListDataEnterprise.operatingPeriodEnd, //有效期
            businessScope: this.CmAddListDataEnterprise.businessScope, //经营范围

            customerType: "ENTERPRISE"
          }
        })
          .then(res => {
            this.showPositionValuetext = "提交成功";
            this.imgPosition("middle");
            setTimeout(() => {
              this.$router.push({
                path: "/customerManagement"
              });
            }, 500);
            console.log(res, "上传成功企业");
          })
          .catch(error => {
            this.showPositionValuetext = error.response.data.message
            this.imgPosition("middle");
            console.log(error, "上传失败企业");
          });
      }
    },
    // 图片识别loading
    imgUploading () {
      this.$vux.loading.show({
        text: "图片识别中"
      });
      setTimeout(() => {
        this.$vux.loading.hide();
      }, 8000);
    },
    // 图片识别错误信息提示
    imgPosition (position) {
      this.position = position;
      this.imgPositionValue = true;
    },
    // 身份证校验
    identityCode (num) {
      let reg = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
      if (!reg.test(num)) {
        this.showPositionValuetext = "请输入正确证件号码";
        this.imgPosition("top");
      } else {
        this.identityCodeState = true;
      }
    },
    // 营业执照校验
    businessCode (num) {
      let re = /[^_IOZSVa-z\W]{2}\d{6}[^_IOZSVa-z\W]{10}$/g; //18位
      let reg = /^[A-Za-z0-9]\w{14}$/g;

      if (num.length == 15) {
        if (reg.test(num)) {
          this.businessCodeState = true;
        } else {
          this.showPositionValuetext = "请输入正确营业执照";
          this.imgPosition("top");
        }
      } else if (num.length == 18) {
        if (re.test(num)) {
          this.businessCodeState = true;
        } else {
          this.showPositionValuetext = "请输入正确营业执照";
          this.imgPosition("top");
        }
      }
    },

    // 返回按钮
    returnHistiy () {
      this.$router.goBack();
    },
    // 点击调用ocr弹框
    cameraInfo () {
      this.camera = true;
    },
    // 关闭ocr弹框
    cameraInfoNo () {
      this.camera = false;
    }
  },
  // 监听表单填写是否满足按钮显示条件
  computed: {
    g_r () {
      this.CmAddListDataGR =
        Number(Boolean(this.CmAddListDataOne.customerName)) +
        Number(Boolean(this.CmAddListDataOne.mainManagerId)) +
        Number(Boolean(this.CmAddListDataOne.viceManagerId)) +
        Number(Boolean(this.CmAddListDataOne.identityType)) +
        Number(Boolean(this.CmAddListDataOne.identityNo)) +
        Number(Boolean(this.identityCodeState));
    },
    q_y () {
      this.CmAddListDataQY =
        Number(Boolean(this.CmAddListDataEnterprise.customerName)) +
        Number(Boolean(this.CmAddListDataEnterprise.mainManagerId)) +
        Number(Boolean(this.CmAddListDataEnterprise.viceManagerId)) +
        Number(Boolean(this.CmAddListDataEnterprise.enterpriseScale)) +
        Number(Boolean(this.CmAddListDataEnterprise.identityType)) +
        Number(Boolean(this.CmAddListDataEnterprise.identityNo)) +
        Number(Boolean(this.businessCodeState));
    }
  },
  // 监听表单填写是否满足按钮显示条件
  watch: {
    "CmAddListDataOne.identityNo" (val) {
      if (val.length == 18) {
        this.identityCode(this.CmAddListDataOne.identityNo);
      } else if (val.length > 18) {
        this.identityCodeState = false;
        this.showPositionValuetext = "请输入正确证件号码";
        this.imgPosition("top");
      } else {
        this.identityCodeState = false;
      }
    },
    // 营业执照验证
    "CmAddListDataEnterprise.identityNo" (val) {
      if (val.length == 15 || val.length == 18) {
        this.businessCode(this.CmAddListDataEnterprise.identityNo);
      } else if (val.length > 18) {
        this.businessCodeState = false;
        this.showPositionValuetext = "请输入正确营业执照";
        this.imgPosition("top");
      } else {
        this.businessCodeState = false;
      }
    },
    CmAddListDataGR (newVal, oldVal) {
      if (Number(newVal) === 6) {
        this.CmAddListDataGROk = true;
      } else {
        this.CmAddListDataGROk = false;
      }
    },
    CmAddListDataQY (newVal, oldVal) {
      if (Number(newVal) === 7) {
        this.CmAddListDataQYOk = true;
      } else {
        this.CmAddListDataQYOk = false;
      }
    }
  },
  mounted () {
    this.loadInfo(this.$route.query.val)
    this.QueryEnum("lss-customer", "certificateType", this.listTypeId); //证件类型方式
    this.QueryEnum("lss-customer", "personalType", this.listTypeOneId); //个人证件类型方式 
    // this.loadInfo();
  }
};
</script>

<style  scoped lang="less">
.CmAddList_box {
  position: fixed;
  top: 0;
  z-index: 500;
  width: 100%;
  height: 100%;
  background: #f9f9f9;
  overflow: hidden;
  .CmAddList_header {
    width: 100%;
    height: 0.44rem;
    text-align: center;
    line-height: 0.44rem;
    background: #ffffff;
    position: fixed;
    z-index: 201;
    box-shadow: inset 0 -1px 0 0 rgba(207, 207, 207, 0.2);
    .CmAddList_header_return {
      margin-top: -0.04rem;
      float: left;
      img {
        // width: 0.15rem;
        height: 0.205rem;
        padding-left: 0.085rem;
        padding-top: 0.02rem;
      }
      span {
        font-family: Regular;
        font-size: 0.17rem;
        color: #3e3e3e;
        letter-spacing: -0.41px;
        line-height: 0.22rem;
      }
    }
    p {
      font-family: PingFangSC-Semibold;
      font-size: 0.17rem;
      color: #3e3e3e;
      letter-spacing: -0.41px;
      text-align: center;
      height: 0.44rem;
      font-weight: 700;

      line-height: 0.44rem;
      margin-left: 0.7rem;
      margin-right: 0.7rem;
    }
  }
  .dictograph_box {
    display: none;
  }
  .scroll {
    .CmAddList_content {
      // margin-top: 0.4rem;
      top: 0.4rem;
      .CmAddList_title {
        height: 0.4rem;
        line-height: 0.44rem;
        padding-left: 0.16rem;
        font-family: PingFangSC-Regular;
        font-size: 0.14rem;
        color: rgba(0, 22, 22, 0.45);
        letter-spacing: -0.34px;
      }
      .CmAddList_list_box {
        height: 100%;
        .CmAddList_list {
          background: #ffffff;
          border: 1px solid #ffffff;
          padding: 0px 0px 0px 0.16rem;
          .CmAddList_list_item {
            height: 0.4rem;
            line-height: 0.4rem;
            border-bottom: 1px solid #f6f6f6;
            span {
              font-family: PingFangSC-Regular;
              font-size: 0.15rem;
              color: #3e3e3e;
              letter-spacing: -0.36px;
              margin-right: 0.2rem;
              width: 0.7rem;
              display: inline-block;
              text-align: center;
            }
            input {
              font-family: PingFangSC-Regular;
              font-size: 0.15rem;
              color: rgba(0, 22, 22, 0.85);
              letter-spacing: -0.36px;
            }
            .CmAddList_list_item_camera {
              float: right;
              width: 0.42rem;
              height: 100%;
              img {
                margin-left: 0.1rem;
                width: 0.19rem;
                height: 0.16rem;
              }
            }
            input::placeholder {
              font-family: PingFangSC-Regular;
              font-size: 0.15rem;
              color: rgba(0, 22, 22, 0.25);
              letter-spacing: -0.36px;
              // opacity: 0.25;
            }
          }
          .CmAddList_list_item:last-child {
            border-bottom: 0px solid #f6f6f6;
          }
          .CmAddList_list_item_typeId {
            border-bottom: 1px solid #f6f6f6;
          }
          .CmAddList_list_item_textarea {
            height: auto;
            span {
              font-family: PingFangSC-Regular;
              font-size: 0.15rem;
              color: #3e3e3e;
              letter-spacing: -0.36px;
              margin-right: 0.2rem;
              width: 0.7rem;
              display: inline-block;
              text-align: center;
            }
            textarea {
              width: 70%;
              font-family: PingFangSC-Regular;
              font-size: 0.15rem;
              color: rgba(0, 22, 22, 0.85);
              letter-spacing: -0.36px;
            }
          }
        }
        .CmAddList_button {
          width: 100%;
          margin-top: 0.36rem;
          margin-bottom: 0.5rem;
          text-align: center;
          button {
            background: #a8becf;
            width: 85%;
            height: 0.44rem;
            font-family: PingFangSC-Medium;
            font-size: 0.18rem;
            color: #ffffff;
            letter-spacing: 0;
            text-align: center;
          }
          .buttonMeet {
            background: #2a78dc;
          }

          button:active {
            background: #3096f8;
          }
        }
      }
    }
  }
  .CmAddList_alert {
    .CmAddList_alert_box {
      position: fixed;
      left: 0;
      bottom: 0;
      height: 1.6rem;
      -webkit-transform: translate(0, 100%);
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      z-index: 5000;
      width: 100%;
      background-color: #fff;
      transition: -webkit-transform 0.3s;
      transition: transform 0.3s;
      transition: transform 0.3s, -webkit-transform 0.3s;
      text-align: center;

      .CmAddList_alert_box_menu {
        margin-top: 0.24rem;

        .CmAddList_alert_box_menu_item {
          height: 0.4rem;
          line-height: 0.4rem;
          border-top: 1px solid #f6f6f6;
          font-family: PingFangSC-Regular;
          font-size: 0.18rem;
          color: rgba(0, 22, 22, 0.85);
          letter-spacing: -0.43px;
        }
        .CmAddList_alert_box_menu_item:active {
          background: #f4f4f4;
        }
      }
      .CmAddList_alert_box_action {
        background: #f9fafb;
        padding-top: 0.08rem;
        .CmAddList_alert_box_action_cell {
          width: 100%;
          background-color: #fff;
          height: 0.4rem;
          font-family: PingFangSC-Regular;
          font-size: 0.18rem;
          color: rgba(0, 22, 22, 0.85);
          letter-spacing: -0.43px;
          line-height: 0.4rem;
          text-align: center;
        }
        .CmAddList_alert_box_action_cell:active {
          background: #f4f4f4;
        }
      }
    }
  }
  .CmAddList_alert_active {
    position: fixed;
    z-index: 1000;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    .CmAddList_alert_box {
      transform: translate(0, -4%);
    }
  }
}
</style>
